<template>
  <div class="home">
    <p> <label for="name">账号</label> <input type="text" id="name" v-model="options.username"></p>
    <p> <label for="password">密码</label> <input type="password" id="password" v-model="options.password"></p>  
    <p> <button @click="login">登录</button> </p>
    <p> <button @click="startNotify">开始通知</button> <button @click="stopNotify">停止通知</button></p>
  </div>
</template>

<script>
import iNotify from '@wcjiang/notify';

import {apilogin } from "@/api"
import {reactive,onMounted} from 'vue'
import {useRouter} from 'vue-router'
export default {
  name: 'Home',
  setup(){
    const options = reactive({username:null,password:null})
    
    const router = useRouter()
    const login = () => {
      if(!options.username || !options.password ){
        alert('请输入用户名密码')
        return
      }
      apilogin(options).then(res=>{
        sessionStorage.username =  res.data
        sessionStorage.token = res.token
        alert(res.msg)
        options.username = null
        options.password = null
        router.push('/about')
      })
    }


    const notify = new iNotify({
      message: '有消息了。', // 标题
      effect: 'flash', // flash | scroll 闪烁还是滚动
      openurl:'https://www.baidu.com', // 点击弹窗打开连接地址
      onclick: () => { // 点击弹出的窗之行事件
        alert('你点击了消息')
      },
      // 可选播放声音
      audio:{
        // 可以使用数组传多种格式的声音文件
        file: ['msg.mp4','msg.mp3','msg.wav']
        // 下面也是可以的哦
        // file: 'msg.mp4'
      },
      // 标题闪烁，或者滚动速度
      interval: 1000,
      // 可选，默认绿底白字的  Favicon
      updateFavicon:{
        // favicon 字体颜色
        textColor: '#fff',
        // 背景颜色，设置背景颜色透明，将值设置为“transparent”
        backgroundColor: '#2F9A00' 
      },
      // 可选chrome浏览器通知，默认不填写就是下面的内容
      notification:{
        title:'通知！', // 设置标题
        icon:'', // 设置图标 icon 默认为 Favicon
        body:'您来了一条新消息', // 设置消息内容
      }
    });

    const startNotify = () => {
      notify.setTitle(true).setFavicon(1).notify(true)
    }

    const stopNotify = () => {
      notify.setTitle().faviconClear()
    }
    onMounted(()=>{
      console.log(notify.isPermission())
    })

    return {
      options,
      login,
      startNotify,
      stopNotify

    }
  }
}
</script>
